<template>
  <div class="home">
    <div>
      <span
        v-for="(item, index) in nav"
        :key="index"
        @click="change(index)"
        :class="{ active: index <= flag }"
        >{{ item }}</span
      >
    </div>
    <ul>
      <li v-show="flag == 0">
        商品名称：<input type="text" v-model="name" />
        <br />
        <button @click="step1">下一步</button>
      </li>
      <li v-show="flag == 1">
        商品价格：<input type="text" v-model="price" />
        <br />
        <button @click="flag--">上一步</button>
        <button @click="step2">下一步</button>
      </li>
      <li v-show="flag == 2">
        商品图片：<input type="text" v-model="img" />
        <br />
        <button @click="flag--">上一步</button>
        <button @click="step3">下一步</button>
      </li>
      <li v-show="flag == 3">
        商品库存：<input type="text" v-model="num" />
        <br />
        <button @click="flag--">上一步</button>
        <button @click="submit">提交</button>
      </li>
    </ul>
    <div v-show="show">
      <p>商品名称是{{ name }}</p>
      <p>商品价格是{{ price }}</p>
      <p>商品图片地址是{{ img }}</p>
      <p>商品库存是{{ num }}</p>
      <button @click="reset">清空重置</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: ["第一步", "第二步", "第三步", "最后一步"],
      name: "",
      price: "",
      img: "",
      num: "",
      flag: 0,
      show: false,
    };
  },
  methods: {
    change(index) {
      // this.flag = index;
      if (index == 0) {
        this.flag = 0;
      } else if (index == 1) {
        this.step1();
      } else if (index == 2) {
        this.step2();
      } else if (index == 3) {
        this.step3();
      }
    },
    step1() {
      if (this.name == "") {
        alert("不能为空");
      } else {
        this.flag = 1;
      }
    },
    step2() {
      if (this.price == "") {
        alert("不能为空");
      } else {
        this.flag = 2;
      }
    },
    step3() {
      if (this.img == "") {
        alert("不能为空");
      } else {
        this.flag = 3;
      }
    },
    submit() {
      if (this.num == "") {
        alert("不能为空");
      } else {
        this.show = true;
      }
    },
    reset() {
      this.name = "";
      this.price = "";
      this.img = "";
      this.num = "";
      this.show = false;
      this.flag = 0;
    },
  },
};
</script>
<style lang="scss">
.active {
  color: aquamarine;
}
</style>
